<template>
	<view class="content">
		<up-search placeholder="搜索景点" bg-color="#e3e3e3" v-model="keyword"></up-search>
		<up-swiper v-if="bannerList.length" :list="bannerList" key-name="image" showTitle radius="8" :autoplay="true" height="160"></up-swiper>
		<up-notice-bar text="测试数据, 非真实数据" mode="closable"></up-notice-bar>
		<view class="list">
			<up-waterfall v-model="flowList" ref="uWaterfallRef" columns="2">
				<template v-slot:column="{colList, colIndex}"  >
					<view class="demo-water" v-for="(item, index) in colList" :key="index" @click="goDetail(item)">
						<up-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></up-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-time">
							{{item.times}}
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">
								{{item.tag[0]}}
							</view>
							<view class="demo-tag-text">
								{{item.tag[1]}}
							</view>
							<view class="isDot" v-if="item.isDot">
								{{item.isDot}}
							</view>
						</view>
					</view>
				</template>
			</up-waterfall>
		</view>
		<view v-if="showTopBtn" @click="toTop" class="topClass">
			<up-icon name="arrow-upward" color="#fff" size = "28"></up-icon>
		</view>
	</view>
</template>

<script setup>
	import { getBanner, getHomeList,generateUUID, randomInt} from '../../api/api';
	import { onLoad, onReachBottom, onPageScroll} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	
	const keyword = ref('');
	const bannerList = ref([]);
	const flowList = ref([]);
	//向上图标是否显示
	const showTopBtn = ref(0);
	
	onLoad(() => {
		getBanner().then(res => {
			console.log(res, 'res');
			bannerList.value = res.bannerList;
		});
		getHomeList().then(res => {
			console.log(res, 'getHomeList');
			flowList.value = res;
		})
	});
	
	onReachBottom(() => {
		console.log('触底');
		//模拟触底后数据加载
		setTimeout(() => {
			addRandomData(), 1000
		})
		//模拟后端返回的数据
		const addRandomData = () => {
			for (let i = 0; i <10; i++){
				let index = randomInt(0, flowList.value.length - 1);
				let randomItem = JSON.parse(JSON.stringify(flowList.value[index]));
				randomItem.id = generateUUID();
				flowList.value.push(randomItem);
			}
		}
	});
	
	onPageScroll((e) => {
		if(e.scrollTop > 600){
			showTopBtn.value = 1;
		}else{
			showTopBtn.value = 0;
		}
	});
	
	const goDetail = (item) => {
		const can = JSON.stringify(item);
		uni.navigateTo({
			url: `/pages/detail/detail?item=${encodeURIComponent(can)}`
		})
	}
	
	const toTop = () => {
		uni.pageScrollTo({
			scrollTop:0,
			duration: 300
		})
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.content{
		padding: 20rpx 20rpx;
	}
	.list{
		margin: 30rpx 0;
		.demo-water {
			margin: 10rpx 10rpx 10rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 16rpx;
			position: relative;
		}
	}
	.demo-title {
		font-size: 30rpx;
		margin-top: 10rpx;
		color: #303133;
	}
	.demo-time{
		font-size: 24rpx;
		color: #777;
		margin-top: 10rpx;
		
	}
	.demo-tag{
		display: flex;
		margin-top: 10rpx;
		.demo-tag-owner{
			border: 1px solid rgb(252,163,129);
			color: #ffaa00;
			font-size: 20rpx;
			display: flex;
			align-items: center;
			padding: 4rpx 14rpx;
			border-radius: 50rpx;
		}
		.demo-tag-text{
			border: 1px solid #00aaff;
			color: #00aaff;
			margin-left: 20rpx;
			border-radius: 50rpx;
			padding: 4rpx 14rpx;
			font-size: 20rpx;
			display: flex;
			align-items: center;
		}
	}
	.isDot{
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 32rpx;
		background-color: red;
		text-align: center;
		border-radius: 10rpx;
		padding: 4rpx 10rpx;
	}
	.topClass{
		position: fixed;
		bottom: 120rpx;
		right: 30rpx;
		background-color: rgba(0,0,0,0.5);
		width: 44rpx;
		height: 44rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
